<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<script>
		function ajax(options) {

			return new Promise((resolve, reject) => {
				// 1创建ajax对象
				var xhr = new XMLHttpRequest();
				// 监听加载开始
				xhr.onloadstart = function () {

				}
				// 监听加载结束
				xhr.onloadend = function () {

				}
				// 监听加载的进度
				xhr.onprogress = function () {

				}
				// 监听上传的进度
				xhr.upload.onprogress = function () {

				}
				// 监听文件下载进度
				// console.log(xhr)
				// 2设置请求的方法和地址
				xhr.open(options.method, options.url)
				// 3发送请求（可以携带数据）
				xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
				// 根据参数设置头部
				for (var k in options.headers) {
					xhr.setRequestHeader(k, options.headers[k])
				}
				var dataStr = '';
				var dataArr = [];
				for (var key in options.data) {
					dataArr.push(key + "=" + options.data[key]);
				}
				dataStr = dataArr.join('&')
				// 根据options.data对象生成参数字符串
				// 在请求的时候进行统一的处理
				options.requestMiddle(xhr)
				xhr.send(dataStr)
				// 4监听xhr状态变化
				xhr.onreadystatechange = function () {
					if (xhr.status == 200 && xhr.readyState == 4) {
						// 顺利成功返回数据
						// console.log(xhr.status)
						// console.log(xhr.readyState)
						// console.log(xhr.response)
						// options.callback(xhr.response)
						options.response(xhr)
						// 响应的统一处理
						resolve(JSON.parse(xhr.response))

					}

				}
			})

		}
	</script>
	<script>

		// 对xhr浏览器客户端请求的封装
		// 对http模块进行请求的封装


	</script>
</body>

</html>